<template>
  <view>
    <u-grid :col="col" :border="border">
      <u-grid-item v-for="(item, index) in data" :key="item[keys]" @click="navTo(item[keys])">
        <view class="item-box">
          <view class="bgbox">
            <image :src="item[bgimg] || ''" mode="" class="bgimg" />
            <view v-if="iconimgBoo">
              <image :src="imgList[index]" mode="" />
            </view>
          </view>
          <view class="mainTitle c-overflow-1">
            <text v-for="a in item[mainTitleValue]" :key="a.id" class="c-mr10">
              {{ a.name || '' }}
            </text>
          </view>
          <view class="viceTitle c-overflow-1" v-if="viceTitle">{{ item[viceTitleValue] || '' }}</view>
          <view class="money" v-if="money">
            <view>{{ moneySymbol || '' }}</view>
            <view>{{ item[moneyValue] || '' }}</view>
          </view>
          <view class="pageView" v-if="pageView">
            <view v-if="shopping">
              <u-icon name="shopping-cart-fill" :custom-style="{color: '#F36823', fontSize: '32rpx'}"></u-icon>
              <view class="shoppingNum" :style="shoppingNumStyle">{{ item[shoppingNum] || 0 }}</view>
            </view>
            <view v-if="view">
              <u-icon name="eye-fill" :custom-style="{color: '#F36823', fontSize: '32rpx'}"></u-icon>
              <view class="viewNum" :style="viewNumStyle">{{ item[viewNum] || 0 }}</view>
            </view>
          </view>
        </view>
      </u-grid-item>
    </u-grid>
  </view>
</template>
<script>
  import collect from '@/services/collect'
  export default {
    data() {
      return {
        imgList: []
      }
    },
    props: {
      moneySymbol: {
        type: String,
        default: () => {
          return null
        }
      },
      iconimgBoo: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      bgimg: {
        type: String,
        default: () => {
          return null
        }
      },
      mainTitleValue: {
        type: String,
        default: () => {
          return null
        }
      },
      viceTitleValue: {
        type: String,
        default: () => {
          return null
        }
      },
      moneyValue: {
        type: String,
        default: () => {
          return null
        }
      },
      pageView: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      shopping: {
        type: Boolean,
        default: () => {
          return true
        }
      },
      view: {
        type: Boolean,
        default: () => {
          return true
        }
      },
      shoppingNum: {
        type: String,
        default: () => {
          return null
        }
      },
      viewNum: {
        type: String,
        default: () => {
          return null
        }
      },
      shoppingNumStyle: {
        type: Object,
        default: () => {
          return null
        }
      },
      viewNumStyle: {
        type: Object,
        default: () => {
          return null
        }
      },
      border: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      mainTitle: {
        type: Boolean,
        default: () => {
          return true
        }
      },
      viceTitle: {
        type: Boolean,
        default: () => {
          return true
        }
      },
      money: {
        type: Boolean,
        default: () => {
          return true
        }
      },
      col: {
        type: Number,
        default: () => {
          return 2
        }
      },
      data: {
        type: Array,
        require: true,
        default: () => {
          return null
        }
      },
      keys: {
        require: true,
        type: String,
        default: () => {
          return null
        }
      }
    },
    methods: {
      navTo(id) {
        this.$emit('navTo', id)
      }
    }
  }
</script>
<style lang="scss">
  .item-box {
    width: 90%;
    margin: 0 auto;
    > .bgbox {
      width: 100%;
      padding-top: 100%;
      position: relative;
      > image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 333;
        border-radius: 10%;
      }
      > view {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 444;
        border-radius: 34%;
        overflow: hidden;
        > image {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 70%;
          height: 70%;
        }
      }
    }
  }
  .mainTitle,
  .viceTitle,
  .money,
  .pageView {
    margin-top: 16rpx;
  }
  .mainTitle {
    font-size: 24rpx;
    color: #a4abb8;
    font-weight: 600;
  }
  .viceTitle,
  .money {
    font-size: 30rpx;
    color: #222b45;
    font-weight: 600;
  }
  .money {
    display: flex;
    font-weight: 400;
    flex-flow: row nowrap;
  }
  .pageView {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > view {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &:last-of-type {
        margin-left: 30rpx;
      }
    }
  }
  .shoppingNum,
  .viewNum {
    font-size: 24rpx;
    color: #575e71;
    font-weight: 600;
    margin-left: 10rpx;
  }
</style>
